<template>
	<view>
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm font-sub-title">
				<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
				绑定设备
			</view>
		</view>
		<view class="cu-list menu sm-border" :style="{marginTop:navHeight}">
			<view class="cu-item bg-white" @tap="scancode()">
				<text class="cuIcon-scan text-blue" style="font-size: 48rpx;margin-right: 10rpx;"></text>
				<view class="content">
					<text class="font-normal text-blue">扫描设备二维码绑定设备</text>
				</view>
			</view>
			<view class="cu-item bg-white" @tap="showModal" data-target="Modal">
				<text class="cuIcon-write text-blue" style="font-size: 48rpx;margin-right: 10rpx;"></text>
				<view class="content">
					<text class="font-normal text-blue">手动输入设备号绑定设备</text>
				</view>
			</view>
			<view class="cu-item bg-white">
				<view class="content">
					<text class=" margin-right font-normal">设备编号</text>
					<text class=" margin-right font-normal" v-if="user.IMEI">{{IMEI}}</text>
					<text class=" margin-right font-normal text-red" v-else>请您先绑定设备</text>
				</view>
			</view>
			<view class="cu-item bg-white">
				<view class="content">
					<text class=" margin-right font-normal">设备型号</text>
					<text class=" margin-right font-normal">科强 H003</text>
				</view>
			</view>
		</view>
		<view class="bg-white padding-sm equipment">
			<image src="../../static/equipment.jpg" mode="" class="margin-right"></image>
			<text class="font-normal" style="color:#666974">孝心环H003是一款4G全网通智能健康手表，除了常规的四重定位、健康监测、运动监测、睡眠监测、紧急呼叫、一键报警等功能，还具有AI智能语音、自动报警、移动支付、佩戴监测、智能提醒等特色功能和优势，其中AI功能拥有海量的语音资源，可以陪伴家人，让家人排除寂寞。
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产品是智慧健康养老的入口，也是居家养老的工具，将为千家万户带来信息化的便利。</text>
		</view>
		<!-- <image src="../../static/function.png" mode="widthFix" style="width: 750rpx;" class=""></image> -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">绑定设备</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl text-left">
					<input maxlength="20" placeholder="请输入IMEI" type="number" v-model="imei"/>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-blue margin-left" @tap="next">下一步</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	var that;
	export default {
		data() {
			return {
				statusBarHeight:Vue.prototype.StatusBar,
				modalName:'',
				imei:'',
				IMEI:'',
				user:""
			}
		},
		computed:{
			...mapGetters(['navHeight']),
		},
		onLoad() {
			that= this;
		},
		onShow(){
			this.user = uni.getStorageSync("userInfo")
			this.IMEI = this.user.IMEI
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			next(){
				if(that.imei==""){
					uni.showToast({
						title:"请输入IMEI",
						position:"bottom",
						icon:"none"
					})
					return;
				}
				this.hideModal()
				uni.navigateTo({
					url: '/pages/equipment/detail?code='+ that.imei +''
				})
			},
			back(){
				uni.navigateBack();
			},
			scancode() {
				uni.scanCode({
					scanType:['qrCode'],
				    success: function (res) {
						uni.navigateTo({
							url: '/pages/equipment/detail?code='+ res.result +''
						})
				    }
				});
			}
		}
	}
</script>

<style>
.equipment uni-image {
	width: 128rpx;
	height: 128rpx;
	float: left;
}
</style>
